
/**
 * DIY编辑器共享常量
 */

// 组件类型
export const COMPONENT_TYPES = {
  SEARCH_BLOCK: 'SearchBlock',      // 商品搜索
  TITLE_TEXT: 'TitleText',          // 标题文本
  IMAGE_BANNER: 'ImageBanner',      // 图片广告
  GOODS_CARD: 'GoodsCard',          // 商品卡片
  GOODS_LIST: 'GoodsList',          // 商品列表
  MENU_GRID: 'MenuGrid',            // 菜单网格
  MENU_LIST: 'MenuList',            // 菜单列表
  COUPON_CARD: 'CouponCard',        // 优惠券卡片
  SECKILL_BLOCK: 'SeckillBlock',    // 秒杀区块
  GROUPON_BLOCK: 'GrouponBlock',    // 团购区块
  USER_CARD: 'UserCard',            // 用户卡片
  USER_WALLET: 'UserWallet',        // 用户钱包
  USER_COUPON: 'UserCoupon',        // 用户优惠券
  NOTICE: 'Notice',                // 公告
  RICH_TEXT: 'RichText',            // 富文本
  VIDEO: 'Video',                  // 视频
  GRAPHIC_NAVIGATION: 'GraphicNavigation', // 图文导航
  TAB_BAR: 'TabBar',              // 底部导航
  MAGIC_CUBE: 'MagicCube',          // 魔方
  AUXILIARY_SEGMENTATION: 'AuxiliarySegmentation', // 辅助分割
  STORE_INFORMATION: 'StoreInformation', // 店铺信息
  FOLLOW: 'Follow',                // 关注公众号
  SUSPENSION: 'Suspension',        // 悬浮
  ONLINE_SERVICE: 'OnlineService',    // 在线客服
}

// 组件分类
export const COMPONENT_CATEGORIES = {
  BASIC: 'basic',                    // 基础组件
  GOODS: 'goods',                    // 商品组件
  MARKETING: 'marketing',            // 营销组件
  USER: 'user'                       // 用户组件
}

// 页面配置
export const PAGE_CONFIG = {
  DEFAULT_TITLE: '页面标题',
  DEFAULT_BG_COLOR: '#ffffff',
  DEFAULT_MARGIN: 0
}

// 组件默认配置
export const DEFAULT_COMPONENT_CONFIG = {
  [COMPONENT_TYPES.SEARCH_BLOCK]: {
    height: 36,
    backgroundColor: '#f5f5f5',
    placeholder: '请输入搜索关键词',
    borderRadius: 10,
    fontColor: '#b0b3bf',
    iconColor: '#b0b3bf',
    placeholderPosition: 'left',
    showScan: false,
    navbar: true,
    hotKeywords: []
  },
  [COMPONENT_TYPES.TITLE_TEXT]: {
    text: '标题文本',
    fontSize: 16,
    color: '#333333',
    fontWeight: 'normal',
    textAlign: 'left'
  },
  [COMPONENT_TYPES.IMAGE_BANNER]: {
    images: [],
    height: 150,
    borderRadius: 0,
    autoplay: true,
    interval: 3000,
    displayMode: 'swiper', // 确保默认轮播模式
    pageMargin: 10,
    imageSpacing: 10,
    objectFit: 'cover',
    slidesPerView: 1,
    showPagination: true,
    centeredSlides: false
  },
  [COMPONENT_TYPES.NOTICE]: {
    text: '这里是公告内容',
    backgroundColor: '#fffbe6',
    textColor: '#e6a23c',
    fontSize: 14,
    fontWeight: 'normal',
    iconType: 'bell',
    iconColor: '#e6a23c',
    iconSize: 16,
    borderRadius: 4,
    padding: 10
  },
  [COMPONENT_TYPES.RICH_TEXT]: {
    content: '',
    backgroundColor: '#ffffff',
    textColor: '#333333',
    fontSize: 14,
    lineHeight: 1.6,
    textAlign: 'left',
    borderRadius: 0,
    padding: 10
  },
  [COMPONENT_TYPES.VIDEO]: {
    src: '',
    coverUrl: '',
    height: 210,
    backgroundColor: '#000000',
    borderRadius: 0,
    autoplay: false,
    loop: false,
    muted: false,
    showControls: true
  },
  [COMPONENT_TYPES.ONLINE_SERVICE]: {
    text: '在线客服',
    icon: '',
    showButton: true,
    buttonText: '立即咨询',
    buttonType: 'primary',
    buttonSize: 'default',
    layout: 'horizontal',
    align: 'left',
    backgroundColor: '#ffffff',
    showBorder: true,
    borderColor: '#e4e7ed',
    borderRadius: 4,
    padding: 10
  },
  [COMPONENT_TYPES.USER_CARD]: {
    title: '用户卡片',
    description: '用户描述',
    avatar: '',
    buttonText: '立即关注',
    buttonType: 'danger',
    buttonColor: '#f44',
    buttonSize: 'small',
    height: 90,
    backgroundColor: '#ffffff'
  },
  [COMPONENT_TYPES.USER_WALLET]: {
    title: '我的钱包',
    balance: '0.00',
    unit: '元',
    showButton: true,
    buttonText: '立即充值',
    buttonType: 'primary',
    buttonSize: 'default',
    backgroundColor: '#ffffff',
    showBorder: true,
    borderColor: '#e4e7ed',
    borderRadius: 4,
    padding: 15
  },
  [COMPONENT_TYPES.USER_COUPON]: {
    title: '我的优惠券',
    items: [],
    displayMode: 'grid',
    gridColumns: 2,
    cardStyle: 'default',
    backgroundColor: '#ffffff',
    showTag: true,
    tagText: '优惠券',
    showReadCount: true,
    showLikeCount: true,
    showMore: true,
    showBottomMore: false,
    borderRadius: 0,
    itemMargin: 15,
    paddingTop: 10,
    paddingHorizontal: 15
  },
  [COMPONENT_TYPES.GOODS_CARD]: {
    columns: 2,
    margin: 10,
    borderRadius: 4,
    showTitle: true,
    showPrice: true,
    showOriginalPrice: true,
    showSales: false,
    backgroundColor: '#ffffff',
    itemBackgroundColor: '#ffffff'
  },
  [COMPONENT_TYPES.MENU_GRID]: {
    menuList: [],
    columns: 4,
    showText: true,
    iconSize: 24,
    iconColor: '#333333',
    imageSize: 45,
    imageBorderRadius: 0,
    textSize: 12,
    textColor: '#333333',
    textHeight: 20,
    padding: 10,
    borderRadius: 0,
    backgroundColor: '#ffffff',
    backgroundImage: ''
  },
  [COMPONENT_TYPES.MENU_LIST]: {
    menuList: [],
    showText: true,
    iconSize: 24,
    iconColor: '#333333',
    textSize: 14,
    textColor: '#333333',
    padding: 10,
    showBorder: true,
    borderColor: '#e4e7ed',
    borderRadius: 0,
    backgroundColor: '#ffffff',
    showArrow: true
  },
  [COMPONENT_TYPES.COUPON_CARD]: {
    couponList: [],
    displayMode: 'grid',
    gridColumns: 2,
    cardStyle: 'default',
    backgroundColor: '#ffffff',
    showTag: true,
    tagText: '优惠券',
    showReadCount: true,
    showLikeCount: true,
    showMore: true,
    showBottomMore: false,
    borderRadius: 0,
    itemMargin: 15,
    paddingTop: 10,
    paddingHorizontal: 15
  },
  [COMPONENT_TYPES.SECKILL_BLOCK]: {
    title: '限时秒杀',
    endTime: '',
    columns: 3,
    margin: 10,
    padding: 10,
    borderRadius: 0,
    itemBorderRadius: 4,
    showCountdown: true,
    showProgress: true,
    showMore: true,
    goodsList: [],
    backgroundColor: '#ffffff',
    itemBackgroundColor: '#ffffff'
  },
  [COMPONENT_TYPES.GROUPON_BLOCK]: {
    title: '拼团活动',
    columns: 2,
    margin: 10,
    padding: 10,
    borderRadius: 0,
    itemBorderRadius: 4,
    showProgress: true,
    showMore: true,
    grouponGoods: [],
    backgroundColor: '#ffffff',
    itemBackgroundColor: '#ffffff'
  },
  [COMPONENT_TYPES.AUXILIARY_SEGMENTATION]: {
    height: 10,
    backgroundColor: '#f5f5f5',
    lineStyle: 'solid',
    lineColor: '#e4e7ed',
    lineHeight: 1
  },
  [COMPONENT_TYPES.TAB_BAR]: {
    items: [],
    activeColor: '#409eff',
    inactiveColor: '#909399',
    backgroundColor: '#ffffff',
    borderStyle: 'solid',
    borderColor: '#e4e7ed',
    iconSize: 20,
    textSize: 12
  },
  [COMPONENT_TYPES.MAGIC_CUBE]: {
    cubeList: [],
    layout: 'grid',
    columns: 3,
    rows: 3,
    gap: 5,
    borderRadius: 0
  },
  [COMPONENT_TYPES.SUSPENSION]: {
    image: '',
    link: '',
    position: 'right-bottom',
    size: 50,
    distance: 20
  },
  [COMPONENT_TYPES.GRAPHIC_NAVIGATION]: {
    items: [],
    navigationType: 'image',
    layout: 'grid',
    columns: 4,
    showSize: 4,
    justifyContent: 'space-evenly',
    backgroundColor: '#ffffff',
    backgroundImage: '',
    iconSize: 24,
    iconColor: '#333333',
    imageSize: 45,
    imageBorderRadius: 0,
    textSize: 12,
    textColor: '#333333',
    textHeight: 20,
    padding: 10,
    borderRadius: 0
  },
  [COMPONENT_TYPES.IMAGE_BANNER]: {
    images: [],
    height: 150,
    borderRadius: 0,
    autoplay: true,
    interval: 3000,
    displayMode: 'swiper',
    pageMargin: 10,
    imageSpacing: 10,
    objectFit: 'cover',
    slidesPerView: 1,
    showPagination: true,
    centeredSlides: false
  },
  [COMPONENT_TYPES.TITLE_TEXT]: {
    text: '标题文本',
    fontSize: 16,
    color: '#333333',
    fontWeight: 'normal',
    textAlign: 'left'
  },
  [COMPONENT_TYPES.GOODS_CARD]: {
    goodsList: [],
    layout: 'grid', // grid, list
    columns: 2,
    showPrice: true,
    showTitle: true,
    borderRadius: 4,
    margin: 10
  },
  [COMPONENT_TYPES.GOODS_LIST]: {
    goodsList: [],
    layout: 'vertical', // vertical, horizontal
    showPrice: true,
    showTitle: true,
    showSales: false,
    borderRadius: 4,
    margin: 10
  },
  [COMPONENT_TYPES.MENU_GRID]: {
    menuList: [],
    columns: 4,
    showText: true,
    iconSize: 24,
    textSize: 12,
    borderRadius: 4,
    margin: 10
  },
  [COMPONENT_TYPES.MENU_LIST]: {
    menuList: [],
    showIcon: true,
    showArrow: true,
    iconSize: 20,
    textSize: 14,
    borderRadius: 4,
    margin: 10
  },
  [COMPONENT_TYPES.COUPON_CARD]: {
    couponList: [],
    showReceive: true,
    showCondition: true,
    borderRadius: 8,
    margin: 10
  },
  [COMPONENT_TYPES.SECKILL_BLOCK]: {
    seckillGoods: [],
    title: '限时秒杀',
    showCountdown: true,
    borderRadius: 8,
    margin: 10
  },
  [COMPONENT_TYPES.GROUPON_BLOCK]: {
    grouponGoods: [],
    title: '团购活动',
    showProgress: true,
    borderRadius: 8,
    margin: 10
  },
  [COMPONENT_TYPES.USER_CARD]: {
    avatar: '',
    nickname: '用户昵称',
    showLevel: true,
    showPoints: true,
    borderRadius: 8,
    margin: 10
  },
  [COMPONENT_TYPES.USER_WALLET]: {
    showBalance: true,
    showPoints: true,
    showCoupons: true,
    borderRadius: 8,
    margin: 10
  },
  [COMPONENT_TYPES.USER_COUPON]: {
    couponList: [],
    showStatus: true,
    borderRadius: 8,
    margin: 10
  },
  [COMPONENT_TYPES.STORE_INFORMATION]: {
    name: '店铺信息',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'store',
    description: '店铺信息组件，支持店铺基本信息展示'
  },
  [COMPONENT_TYPES.FOLLOW]: {
    name: '关注公众号',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'follow',
    description: '关注公众号组件，支持二维码和公众号信息'
  },
  [COMPONENT_TYPES.AUXILIARY_SEGMENTATION]: {
    name: '辅助分割',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'segmentation',
    description: '辅助分割组件，用于页面内容分割'
  },
 
  [COMPONENT_TYPES.MAGIC_CUBE]: {
    name: '魔方',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'magic-cube',
    description: '魔方组件，支持自定义布局和内容'
  },
  [COMPONENT_TYPES.STORE_INFORMATION]: {
    name: '店铺信息',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'store',
    description: '店铺信息组件，支持店铺基本信息展示'
  },
  [COMPONENT_TYPES.FOLLOW]: {
    name: '关注公众号',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'follow',
    description: '关注公众号组件，支持二维码和公众号信息'
  },
  [COMPONENT_TYPES.SUSPENSION]: {
    name: '悬浮',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'suspension',
    description: '悬浮组件，支持自定义悬浮内容和位置'
  },
  [COMPONENT_TYPES.ONLINE_SERVICE]: {
    name: '在线客服',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'service',
    description: '在线客服组件，支持自定义按钮和样式'
  },
  [COMPONENT_TYPES.USER_CARD]: {
    name: '用户卡片',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'user-card',
    description: '用户卡片组件，支持自定义头像和按钮'
  },
  [COMPONENT_TYPES.USER_WALLET]: {
    name: '用户钱包',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'wallet',
    description: '用户钱包组件，支持显示余额和充值按钮'
  }
}

// 事件类型
export const EVENT_TYPES = {
  COMPONENT_ADD: 'component:add',
  COMPONENT_REMOVE: 'component:remove',
  COMPONENT_UPDATE: 'component:update',
  COMPONENT_SELECT: 'component:select',
  PAGE_CONFIG_UPDATE: 'page:config:update'
}

// 组件元数据
export const COMPONENT_META = {
  [COMPONENT_TYPES.SEARCH_BLOCK]: {
    name: '商品搜索',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'search',
    description: '商品搜索框组件，支持关键词搜索和扫码功能'
  },
  [COMPONENT_TYPES.TITLE_TEXT]: {
    name: '标题文本',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'title',
    description: '标题文本组件，支持自定义样式和链接'
  },
  [COMPONENT_TYPES.IMAGE_BANNER]: {
    name: '图片广告',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'picture',
    description: '图片轮播组件，支持多张图片轮播展示'
  },
  [COMPONENT_TYPES.NOTICE]: {
    name: '公告',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'notice',
    description: '公告组件，用于显示重要通知信息'
  },
  [COMPONENT_TYPES.RICH_TEXT]: {
    name: '富文本',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'document',
    description: '富文本组件，支持HTML内容'
  },
  [COMPONENT_TYPES.VIDEO]: {
    name: '视频',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'video',
    description: '视频播放组件，支持自定义封面和播放设置'
  },
  [COMPONENT_TYPES.GRAPHIC_NAVIGATION]: {
    name: '图文导航',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'grid',
    description: '图文导航组件，支持图标和图片两种导航方式'
  },
  [COMPONENT_TYPES.TITLE_TEXT]: {
    name: '标题文本',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'title',
    description: '标题文本组件，支持自定义样式和链接'
  },
  [COMPONENT_TYPES.GOODS_CARD]: {
    name: '商品卡片',
    category: COMPONENT_CATEGORIES.GOODS,
    icon: 'goods',
    description: '商品卡片组件，支持网格和列表布局'
  },
  [COMPONENT_TYPES.GOODS_LIST]: {
    name: '商品列表',
    category: COMPONENT_CATEGORIES.GOODS,
    icon: 'goods-list',
    description: '商品列表组件，支持多种布局和样式'
  },
  [COMPONENT_TYPES.MENU_GRID]: {
    name: '菜单网格',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'menu-grid',
    description: '菜单网格组件，支持自定义图标和文本'
  },
  [COMPONENT_TYPES.MENU_LIST]: {
    name: '菜单列表',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'menu-list',
    description: '菜单列表组件，支持自定义图标和文本'
  },
  [COMPONENT_TYPES.COUPON_CARD]: {
    name: '优惠券卡片',
    category: COMPONENT_CATEGORIES.MARKETING,
    icon: 'coupon',
    description: '优惠券卡片组件，支持领取和使用状态'
  },
  [COMPONENT_TYPES.SECKILL_BLOCK]: {
    name: '秒杀区块',
    category: COMPONENT_CATEGORIES.MARKETING,
    icon: 'seckill',
    description: '秒杀区块组件，支持倒计时和商品展示'
  },
  [COMPONENT_TYPES.GROUPON_BLOCK]: {
    name: '团购区块',
    category: COMPONENT_CATEGORIES.MARKETING,
    icon: 'groupon',
    description: '团购区块组件，支持进度条和商品展示'
  },
  [COMPONENT_TYPES.USER_CARD]: {
    name: '用户卡片',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'user',
    description: '用户卡片组件，支持头像和用户信息'
  },
  [COMPONENT_TYPES.USER_WALLET]: {
    name: '用户钱包',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'wallet',
    description: '用户钱包组件，支持余额、积分和优惠券'
  },
  [COMPONENT_TYPES.USER_COUPON]: {
    name: '用户优惠券',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'user-coupon',
    description: '用户优惠券组件，支持优惠券列表和状态'
  },
  [COMPONENT_TYPES.ONLINE_SERVICE]: {
    name: '在线客服',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'service',
    description: '在线客服组件，支持自定义按钮和样式'
  },
  [COMPONENT_TYPES.USER_CARD]: {
    name: '用户卡片',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'user-card',
    description: '用户卡片组件，支持自定义头像和按钮'
  },
  [COMPONENT_TYPES.USER_WALLET]: {
    name: '用户钱包',
    category: COMPONENT_CATEGORIES.USER,
    icon: 'wallet',
    description: '用户钱包组件，支持显示余额和充值按钮'
  },
  [COMPONENT_TYPES.TAB_BAR]: {
    name: '底部导航',
    category: COMPONENT_CATEGORIES.BASIC,
    icon: 'tab-bar',
    description: '底部导航组件，支持自定义导航项和样式'
  },
}
